[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Header from "./components/Header" import Hero from "./components/Hero" import About from "./components/About" import Menu from "./components/Menu" import Specials from "./components/Specials" import IcedDrinks from "./components/IcedDrinks" import Benefits from "./components/Benefits" import ContactForm from "./components/ContactForm" import Footer from "./components/Footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/Header.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" export default function Header() { const [isOpen, setIsOpen] = useState(false) const scrollToSection = (sectionId: string) => { setIsOpen(false) // Close mobile menu when clicking const element = document.getElementById(sectionId) const header = document.querySelector("header") const headerOffset = header?.offsetHeight || 0 if (element) { const elementPosition = element.getBoundingClientRect().top + window.pageYOffset const offsetPosition = elementPosition - headerOffset window.scrollTo({ top: offsetPosition, behavior: "smooth", }) } } return (

scrollToSection("hero")}> Koffee Break Station Self Service Espresso Bar

{isOpen && (

)}

) } [V0_FILE]typescriptreact:file="app/components/Hero.tsx" isEdit="true" isMerged="true" import Image from "next/image" export default function Hero() { const scrollToAbout = () => { const element = document.getElementById("about") const header = document.querySelector("header") const headerOffset = header?.offsetHeight || 0 if (element) { const elementPosition = element.getBoundingClientRect().top + window.pageYOffset const offsetPosition = elementPosition - headerOffset window.scrollTo({ top: offsetPosition, behavior: "smooth", }) } } return (

Koffee Break Station

Self Service Espresso Bar

Prémiová káva, kdykoliv a kdekoliv

) } [V0_FILE]typescriptreact:file="app/components/About.tsx" isEdit="true" isMerged="true" export default function About() { return (

O nás

Koffee Break Station přináší nový pohled na přípravu kávy prostřednictvím samoobslužných automatů. Kombinujeme nejmodernější technologie, špičkovou kvalitu kávy a maximální pohodlí pro naše uživatele.

Naše automaty jsou navrženy s ohledem na potřeby mladé generace, zaměstnanců i studentů, kteří hledají rychlé, cenově dostupné a přitom vysoce kvalitní občerstvení.

Každý kelímek je připraven přímo před zákazníkem, přesně na míru, dle jeho preferencí. Může si vybrat ze širokého kávového menu, vybrat si ze dvou druhů mléka, případně kolik cukru ve svém nápoji chce mít.

) } [V0_FILE]typescriptreact:file="app/components/Menu.tsx" isEdit="true" isMerged="true" import Image from "next/image" import { Badge } from "@/components/ui/badge" const menuItems = [ { name: "Espresso", volume: "30 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3-Opp81um9iZWVsbopaWOyKArxBSPa53.png", isBestSeller: false, }, { name: "Double Espresso", volume: "60 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4-dwC2V0qzpbVnogXO8aroLLkHL9wBeT.png", isBestSeller: true, }, { name: "Espresso Lungo", volume: "90 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5-w3QVygmEV4GME2k1VvBcADRQj6qV7P.png", isBestSeller: false, }, { name: "Americano", volume: "150 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6-9WfM69d4qmWZFPHFO680UcRNqSX90z.png", isBestSeller: true, }, { name: "Cappuccino", volume: "150 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-rsaxQFx24qnQEAQpWeVuLFhg57VWGl.png", isBestSeller: false, }, { name: "Vanilla Cappuccino", volume: "150 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8-0536d4nKTIPm19D88o0SoIHJzvyfoR.png", isBestSeller: false, }, { name: "Caramel Cappuccino", volume: "150 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9-7LZYZIqqdhul1mihApBymVktKD73vp.png", isBestSeller: true, }, { name: "Caffe Latte", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/10-DLJOYGdoxjqSPUTmWIdfJkJGvlPZ0b.png", isBestSeller: false, }, { name: "Vanilla Caffe Latte", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/11-bgMf0GHpYX5fbpRC1Vb8QK8oTQStV3.png", isBestSeller: true, }, { name: "Caramel Caffe Latte", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/12-6KyT7UghQEkTC22OuSx6b7WUnTubng.png", isBestSeller: false, }, ] export default function Menu() { return (

Naše Menu

{menuItems.map((item, index) => (

{item.isBestSeller && ( BEST SELLER )}

{item.name}

{item.volume}

100% Arabica

))}

) } [V0_FILE]typescriptreact:file="app/components/Features.tsx" isEdit="true" isMerged="true" import { Coffee, Clock, Zap } from "lucide-react" const features = [ { icon: Coffee, title: "Prémiová kvalita", description: "Používáme pouze nejkvalitnější kávu od prověřených dodavatelů.", }, { icon: Clock, title: "Dostupnost 24/7", description: "Naše automaty jsou k dispozici nepřetržitě, kdykoliv dostanete chuť.", }, { icon: Zap, title: "Rychlá příprava", description: "Váš nápoj je připraven během několika vteřin, přesně podle vašich preferencí.", }, ] export default function Features() { return (

Proč Koffee Break Station?

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="app/components/Footer.tsx" isMerged="true" import Link from "next/link" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import "./globals.css" import { Playfair_Display, Merriweather } from "next/font/google" import type React from "react" // Import React const playfair = Playfair_Display({ subsets: ["latin"], display: "swap", variable: "--font-playfair", }) const merriweather = Merriweather({ weight: ["300", "400", "700"], subsets: ["latin"], display: "swap", variable: "--font-merriweather", }) export const metadata = { title: "Koffee Break Station | Self Service Espresso Bar", description: "Prémiová káva, kdykoliv a kdekoliv", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/components/Specials.tsx" isMerged="true" import Image from "next/image" import { Badge } from "@/components/ui/badge" const specialItems = [ { name: "Pumpkin Spice Flat White", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/23-rQhOnEAsIJ7w6r4Xwd5H95Eiij4YGy.png", isLimited: true, badge: "LIMITED OFFER!", badgeColor: "bg-orange-600", }, { name: "Moccacino", volume: "250 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20-vGskkxXGiMDz4cgf8biWGe3cYULXsK.png", quality: "33% Cocoa Beans", }, { name: "Chai Latte", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/18-79dTyADkVaYgzKbfh6hU8WvZK5xWOY.png", isNew: true, badge: "NEW RECIPE", }, { name: "Hot Chocolate", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/19-7EwjbPSiSJ8zcO6lkluw88Nat0sxIl.png", isBestSeller: true, quality: "Over 33% Cocoa", }, { name: "Pumpkin Spice Latte", volume: "250 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/21-bH51uRWn0oV3Te0cUE75LeEhrUxQYG.png", isLimited: true, badge: "LIMITED OFFER!", badgeColor: "bg-orange-600", }, { name: "Pumpkin Spice Cappuccino", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/22-R4z9n7qUEZq7JJTJ5CENGs5nLK514M.png", isLimited: true, badge: "LIMITED OFFER!", badgeColor: "bg-orange-600", }, { name: "Caramel Matcha Latte", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/17-4BnEC2XZl2rToRZryIJOtD1H4FMI0X.png", isBestSeller: true, isNew: true, badge: "NEW RECIPE", }, ] export default function Specials() { return (

Naše Specialy

{specialItems.map((item, index) => (

{/* Top-left badge for Best Seller */} {item.isBestSeller && ( BEST SELLER )} {/* Top-right badge for Limited Offer */} {item.isLimited && ( {item.badge} )}

{item.name}

{item.volume}

{item.quality && ( {item.quality} )} {item.isNew && !item.isLimited && ( {item.badge} )}

))}

) } [V0_FILE]typescriptreact:file="app/components/IcedDrinks.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" import { Badge } from "@/components/ui/badge" const icedDrinks = [ { name: "Iced Caramel Cappuccino", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/32-8jfthibZ38vwO6kcJba3IpyJtFbBs2.png", hasCaramel: true, }, { name: "Double Espresso on Ice", volume: "90 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/25-C5LRqmP9wtpvytFvPzV29i8MZhBdYv.png", }, { name: "Iced Flat White", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/29-brcvaziPboq4rxA6X3CzCYQkPpuC2X.png", }, { name: "Iced Caffe Latte", volume: "250 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/28-mnymZEsd2eY2Mj7Abg9bfQqQDvfYsr.png", }, { name: "Iced Matcha Latte", volume: "250 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/30-f8OV2UernacCPUXNpOWreCrEekpokw.png", isNew: true, badge: "NEW RECIPE", }, { name: "Iced Coconut Caffe Latte", volume: "250 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/34-2AxaL3IkHGxkCnDAYoAy9kni2E8whC.png", hasCoconut: true, }, { name: "Iced Coconut Cappuccino", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/33-stSISUZC24KbOOZn9DnTvZ4Hel0wD2.png", hasCoconut: true, }, { name: "Iced Moccacino", volume: "250 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/31-9YEqtYJICmz1t5ANPD0mll7Fovto2r.png", quality: "33% Cocoa Beans", }, { name: "Iced Cappuccino", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/27-uKjMtdDJiwqafBoAwv4VLBE0AwM9vP.png", }, { name: "Iced Americano", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/26-5oRfdsBa8hE0oXcWGVkSlZIPWH2EGY.png", }, { name: "Iced Coconut Flat White", volume: "200 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/35-mpmHFrM79KMdt68NbvHfHKXLR0vIuf.png", hasCoconut: true, }, { name: "Iced Caramel Matcha Latte", volume: "250 ml", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/36-6YUospe85CB9MeuuGyCxnVaOpayiBp.png", quality: "Premium Quality Matcha", hasCaramel: true, }, ] export default function IcedDrinks() { return (

Ledové varianty

{icedDrinks.map((drink, index) => (

{drink.isNew && ( {drink.badge} )}

{drink.name}

{drink.volume}

100% Arabica {drink.quality && ( {drink.quality} )}

))}

) } [V0_FILE]typescriptreact:file="app/components/Benefits.tsx" isMerged="true" import { Coffee, Clock, Zap, CreditCard, Settings, Heart } from "lucide-react" const benefits = [ { icon: Coffee, title: "Prémiová kvalita", description: "Používáme pouze nejkvalitnější kávu od prověřených dodavatelů.", }, { icon: Clock, title: "Dostupnost 24/7", description: "Naše automaty jsou k dispozici nepřetržitě, kdykoliv dostanete chuť.", }, { icon: Zap, title: "Rychlá příprava", description: "Váš nápoj je připraven během několika vteřin, přesně podle vašich preferencí.", }, { icon: CreditCard, title: "Pohodlné placení", description: "Přijímáme platby kartou, hotovostí i zákaznickou kartou.", }, { icon: Settings, title: "Pravidelný servis", description: "Zajišťujeme nepřetržitou údržbu a doplňování surovin.", }, { icon: Heart, title: "Věrnostní program", description: "Odměňujeme naše věrné zákazníky speciálními nabídkami.", }, ] export default function Benefits() { return (

Výhody

{benefits.map((benefit, index) => (

{benefit.title}

{benefit.description}

))}

) } [V0_FILE]typescriptreact:file="app/components/ContactForm.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Coffee, AtSign, MessageSquare, Send } from "lucide-react" export default function ContactForm() { const [name, setName] = useState("") const [email, setEmail] = useState("") const [message, setMessage] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Here you would typically handle the form submission console.log("Form submitted:", { name, email, message }) // Reset form fields setName("") setEmail("") setMessage("") } return (

Kontaktujte nás

setName(e.target.value)} className="w-full pl-10 pr-4 py-2 bg-[#2A2A2A] text-[#EFE7DD] rounded-full focus:outline-none focus:ring-2 focus:ring-[#D4A373]" required />

setEmail(e.target.value)} className="w-full pl-10 pr-4 py-2 bg-[#2A2A2A] text-[#EFE7DD] rounded-full focus:outline-none focus:ring-2 focus:ring-[#D4A373]" required />

) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --dark-espresso: #1a1a1a; --golden-caramel: #d4a373; --creamy-latte: #efe7dd; --charcoal-black: #000000; --muted-olive: #a89f91; --warm-white: #faf5ef; } @layer base { body { font-family: "Playfair Display", serif; font-size: 16px; line-height: 1.6; color: var(--creamy-latte); background-color: var(--charcoal-black); } h1, h2, h3 { font-family: "Merriweather", serif; } } @layer components { .btn { @apply bg-[#D4A373] text-black px-6 py-2 rounded-full font-bold transition duration-300 hover:bg-[#A89F91] hover:scale-105; } } @layer utilities { .text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } } /* Coffee cup shape */ .coffee-cup { position: relative; background-color: #2a2a2a; border-radius: 0 0 100px 100px; overflow: hidden; padding-top: 20px; } .coffee-cup::before { content: ""; position: absolute; right: -50px; top: 25px; width: 70px; height: 120px; background-color: #2a2a2a; border-radius: 0 70px 70px 0; } /* Steam effect */ @keyframes steam { 0% { transform: translateY(0) translateX(-50%) scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-10px) translateX(-50%) scale(1); opacity: 0; } } .steam-effect { position: absolute; left: 50%; bottom: 100%; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%); filter: blur(8px); animation: steam 2s infinite; pointer-events: none; } .steam-effect::before, .steam-effect::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; border-radius: inherit; animation: steam 2s infinite; } .steam-effect::before { animation-delay: -0.5s; } .steam-effect::after { animation-delay: -1s; }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This